<template>
	<view class="content">
		<view class="reservation-top">
			<view class="store-item">
				<image class="img" mode="aspectFill" :src="storeInfo.thumb_img"></image>
				<view class="desc flex-box">
					<view class="item-name">{{storeInfo.name}}</view>
					<view class="item-tags">
						<view class="word-line-clamp1">
							<block v-for="(tag,index) in storeInfo.tags" :key="index">
								<text class="tag-txt">{{tag}}</text>
								<text v-if="index+1!==storeInfo.tags.length">·</text>
							</block>
						</view>
					</view>
					<view class="store-tips" @click="ShaowExplain"> 
						<view>查看商户提供的特权</view>
						<image src="../../static/detail/next.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 选择预约日期 -->
		<view class="reservation-info">
			<view class="reservation-title">
				<view class="reservation-title-name">
					<view class="acLine"></view>
					<text>选择预约日期</text>
				</view>
				<view class="reservation-title-rule" @click="ruleModal">预约规则</view>
			</view>
			<view class="reservation-date">					 
				<view class="reservation-date-item" v-for="(item , index) in storeInfo.workTimeSlot" :key='index' @click="chooseDate(index)">
					<!-- <view class="date" v-bind:class="[item.isBusiness &&!item.isSelect?'nomal-day':'',item.isBusiness&&item.isSelect?'ye-day':'']">{{item.day}}</view>
					<view class="week" v-bind:class="[item.isBusiness &&!item.isSelect?'nomal-week':'',item.isBusiness&&item.isSelect?'ye-week':'']">{{item.week}}</view> -->
					<view class="date" v-bind:class="[!item.isSelect?'nomal-day':'',item.isSelect?'ye-day':'']">{{item.day}}</view>
					<view class="week" v-bind:class="[!item.isSelect?'nomal-week':'',item.isSelect?'ye-week':'']">{{item.week}}</view>
					
				</view>
			</view>
			<view class="reservation-title">
				<view class="reservation-title-name">
					<view class="acLine"></view>
					<text>选择时间</text>
				</view>
			</view>
			
			<view class="reservation-time">					 
				<view class="reservation-time-item" v-bind:class="[Item.allow &&!Item.isSelect?'nomal-time':'',Item.allow&&Item.isSelect!==false?'ye-time':'']" v-for="(Item , index) in storeInfo.workTimeSlot[dayIndex].times" :key='index'  @click="chooseTimes(index)">
				<!-- <view :class="['reservation-time-item' ,'nomal-time']" v-for="(Item , index) in storeInfo.workTimeSlot[dayIndex].times" :key='index' @click="chooseTimes(index)"> -->
				{{Item.startTime}}-{{Item.endTime}}
				</view>
			</view>
			
			<!--  预约须知 -->
			<view class="reservation-tips">
			预约须知：为了更好的保障你的服务体验，<text style="font-weight: bold;">请务必提前15分钟到店并主动出示二维码给到商户进行核销</text>，如果迟到商户有可能因为"当前暂无空闲位置等原因"拒绝为您提供服务。
			</view>
		</view>
		<!-- 预约按钮 -->
		<view class="reservation-button" :class="{noTime:!addParms.startTime}" v-if="bookingType==''" @click="ShowBookingModal">{{addParms.startTime && addParms.endTime ? '确认预约' : '立即预约'}}</view>
		
		<view class="reservation-button" :class="{noTime:!addParms.startTime}" v-if="bookingType=='update'" @click="UpdateTimeMed">修改预约</view>
		
		<view class="mask" v-if="bookingFlag">
			<view class="member-explain" style="padding: 60rpx 40rpx;margin-left: -340rpx;">
				<view class="member-explain-title booking-title">确认预约</view>
				<view class="booking-item">
					<view>预约日期</view>
					<view>{{addParms.appointmentDate}}（周{{weekDate}}）</view>
				</view>
				<view class="booking-item">
					<view>预约时间</view>
					<view>{{addParms.startTime}}-{{addParms.endTime}}</view>
				</view>
				<view class="booking-item">
					<view>预约商户</view>
					<view>{{storeInfo.name}}</view>
				</view>
				<view class="booking-item">
					<view>商户位置</view>
					<view>{{storeInfo.address}}</view>
				</view>
				<view class="booking-modal-btn">
					<view @click="closeMask">取消</view>
					<button open-type="getPhoneNumber" v-if="mineInfo.nick_name.indexOf('Gfner')<0 && mineInfo.phone==''" @getphonenumber="onGetPhoneNumber">确认预约</button>
					<view @click="toBooking" v-else>确认预约</view>
				</view>
				<view class="booking-tip">为了更好的服务体验，请合理善用你的预约权益，多次取消可能会影响你的会员权益</view>
			</view>
		</view>
		<!-- 预约规则 -->
		<view class="mask" v-if="ruleFlag">
			<view class="reservation-rule">
				<view class="rule-title">预约规则</view>
				<view class="rule-content" v-for="(txt , txtindex) in reservationTip" :key="textindex">{{txt}}</view>
				<view class="rule-btn" @click="closeMask">我已知晓</view>
			</view>
		</view>
		<!-- 会员特权说明 -->
		<view class="mask" v-if="memberExplainFlag">
			<view class="member-explain">
				<view class="member-explain-title">会员特权说明</view>
				<scroll-view v-if="storeInfo.members_interests && storeInfo.members_interests.length>0" style="height: 400rpx;" scroll-y="true" :scroll-with-animation='true' :show-scrollbar='false' :enhanced='true'>
					<view class="member-explain-table">
						<view class="member-explain-list" style="background-color: rgba(255, 214, 10, 0.3);font-size: 28rpx;font-weight: bold;color: #333333;">
							<view class="left-item">会员特权名称</view>
							<view class="right-item">特权时效</view>
						</view>
						<view class="member-explain-list" v-for="(explain , eIndex) in storeInfo.members_interests" :key="eIndex">
							<view class="left-item">{{explain.name}}</view>
							<view class="right-item">{{explain.value}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="explain-content">会员须知：商户为平台会员在会员有效期内提供上述会员特权，平台及商户承诺无强制消费，会员在到店运动过程中如果需要使用商户额外的增值服务，会员将需要进行额外单独付费使用。</view>
				<view class="rule-btn" @click="closeMask">我已知晓</view>
			</view>
		</view>
	</view>
</template>

<script>	
	import { apiToBooking } from '../../apis/booking.js';
	import { apiGetStoreDetail } from '../../apis/index.js';
	
	var app = getApp();
	export default {
		data() {
			return {
				optionsData:{},
				bookingType:'',
				ruleFlag:false,
				bookingFlag : false, 
				memberExplainFlag:false ,//会员特权说明
				storeInfo:{},
				dayIndex:0,
				weekDate:'',//周数
				
				years:'',
				day:'',
				month:'',
				
				mineInfo:{},
				
				addParms:{
					uid: 0,
					businessId: 0,
					appointmentDate: '',
					startTime: "",
					endTime: ""
				},
				nickNameFlag:false,
				optionsData:{},
				reservationTip:[
					'1.用户在单一门店每天只允许预约一次，为保障合理性,一天最多只允许预约五次；',
					'2.用户只能预约最近7天的商户；',
					'3.预约请准时前往预约的商户，建议提前十五分钟到场；',
					'4.多次无故爽约、取消会影响用户在平台的信誉评分，其影响您的后续预约及平台的使用；',
					'5.无果遇到特殊情况无法参加，请与在距离预约时间的前30分钟进行线上修改，超时请联系平台客服进行修改或取消。'
				]
			}
		},
		
		onLoad(options) {
			let that = this;
			that.optionsData = options; //free
			that.bookingType = options.type?options.type:'';
			app.isLogin({},function(login){
				that.mineInfo = login;
			})
		},
		
		onShow() {
			this.getDetail(this.optionsData.store_id,this.optionsData.location);
		},
		
		onHide(){
			this.addParms.startTime = '';
			this.addParms.endTime =''
		},
		
		onUnload(){
			this.addParms.startTime = '';
			this.addParms.endTime =''
		},
		
		methods: {
			
			// 手机号授权
			onGetPhoneNumber(e){
				let that = this;
				app.GetMobile(e,function(e){
					app.getUserInfo(function(lRes){
						app.globalData.mineInfo = lRes;
						uni.setStorageSync('mineInfo',lRes);
						that.mineInfo = lRes;
						that.nickNameFlag = true;
						that.toBooking();
					})
				});
			},
			// 判断当前时间是否超过
			isTime(date,starttime,resolve){
				let timer = new Date();
				let month = Number(timer.getMonth()+1)<10?'0'+(timer.getMonth()+1):(timer.getMonth()+1);
				let day = timer.getDate()<10?'0'+timer.getDate():timer.getDate();
				let today = timer.getFullYear()+'-'+month +'-'+day;
				if(date == today) {
					let seleTime = date+' '+starttime+':00';
					seleTime = new Date(seleTime.replace(/-/g,'/'));
					
					if(seleTime.getTime()>timer.getTime()){
						// 当前时间可选
						// console.log('当前时间可选')
						resolve(true);
					}else {
						// console.log('当前时间bu可选')
						resolve(false);
					}
				}else{
					resolve(true);
				}
			},
			//  获取商户详情信息
			getDetail(s_id, location) {
				var that = this;
				const todayData = new Date();
				const params = {
					store_id:  s_id,
					location: location,
				}
				apiGetStoreDetail(params).then(res => {
					that.addParms.uid = uni.getStorageSync('mineInfo').id; // 提交预约条件：用户id
					that.addParms.businessId = res.store_id; // 提交预约条件：商户id
					that.storeInfo = res;
					that.GetStoreAppointmentTime(); //商户预约时间
				})
			},
			
			GetStoreAppointmentTime(){
				let that = this;
				app.httpRequest({
					url:app.globalData.api.store.StoreAppointmentTime,
					data :{
						store_id:that.optionsData.store_id,
						business: that.optionsData.type && that.optionsData.type == 'update'?'update':''
					}
				}).then( storeTimeResult => {
					switch(storeTimeResult.code){
						case 200:
							if(storeTimeResult.data.workTimeSlot){
								that.storeInfo.workTimeSlot = storeTimeResult.data.workTimeSlot;
								// 先处理数组属性
								var newarr = storeTimeResult.data.workTimeSlot.map((item,index,arr)=>{
									item.isSelect = false;
									// 时间
									let timesArr = item.times.map((time,tindex)=>{
										time.isSelect = false;
										return time;
									})
									item.times = timesArr;
									return item;
								});
								that.storeInfo.workTimeSlot = newarr;
								// let dayIndex = newarr.findIndex(function(value, index, arr) {
								//   return value.isBusiness == true;
								// });
								let dayIndex = 0;
								if(dayIndex >=0) {
									that.dayIndex = dayIndex;
									that.GetDate(that.storeInfo.workTimeSlot[dayIndex].day); // 获取当前日期
									that.weekDate = that.storeInfo.workTimeSlot[dayIndex].week;
									that.storeInfo.workTimeSlot[dayIndex].isSelect = true;
									// that.filterTime(that.addParms.appointmentDate,dayIndex);
								}
							}
						break;
						default:
							uni.showToast({
								title:storeTimeResult.message,
								icon:'none'
							})
						break;
					}
				})
			},
			
			filterTime(date,index){
				let that = this;
				let tiemArr = that.storeInfo.workTimeSlot[index].times;
				for (var i = 0; i < tiemArr.length; i++) {
					tiemArr[i].isSelect = false;
					
					that.isTime(date,tiemArr[i].startTime,function(res){
						switch(res){
							case false:
								tiemArr[i].isBooking = false;
								that.storeInfo.workTimeSlot[index].times[i].isBooking = false;
							break;
						}
					});
				}
			},
			
			//  日期格式
			GetDate(date){
				let dateArr = date.split('.');
				this.years = new Date().getFullYear();
				this.yearsNew = new Date().getFullYear()+1;
				this.month = Number(dateArr[0])<10? '0'+dateArr[0]:dateArr[0];
				// this.day = Number(dateArr[1])<10? '0'+dateArr[1]:dateArr[1];
				this.day = dateArr[1];
				
				let dayTime=this.years +'-'+this.month + '-' + dateArr[1]+' '+"23:59:59";
				console.log(dayTime,"dayTime")
				console.log(this.judgeTime(dayTime),"this.judgeTime(dayTime)")
				if(this.judgeTime(dayTime)){
					this.addParms.appointmentDate = this.yearsNew +'-'+this.month + '-' + dateArr[1];
				}else{
					this.addParms.appointmentDate = this.years +'-'+this.month + '-' + dateArr[1];
				}
				
			},
			judgeTime(time){
			  var strtime = time.replace("/-/g", "/");//时间转换
			  //时间
			  var date1 = new Date(strtime);
			  //现在时间
			  var date2 = new Date();
			  //判断时间是否过期
			  return date1 < date2 ? true : false;
			},
			// 选择预约日期
			chooseDate(index){
				if(this.storeInfo.workTimeSlot[index].pop){
					uni.showToast({
						title:this.storeInfo.workTimeSlot[index].msg,
						icon:'none'
					})
				}
				this.addParms.startTime = '';
				this.addParms.endTime = '';
				var newarr = this.storeInfo.workTimeSlot.map((item,index,arr)=>{
					item.isSelect = false;
					return item;
				})
				this.storeInfo.workTimeSlot = newarr;
				this.storeInfo.workTimeSlot[index].isSelect = true;
				this.weekDate =this.storeInfo.workTimeSlot[index].week
				this.dayIndex = index;
				this.GetDate(this.storeInfo.workTimeSlot[index].day); // 获取当前日期
				this.filterTime(this.addParms.appointmentDate,index);
			},
			
			// 选择预约时间段
			chooseTimes(index){
				let that = this;
				if(!that.storeInfo.workTimeSlot[that.dayIndex].times[index].allow){
					uni.showToast({
						title:that.storeInfo.workTimeSlot[that.dayIndex].times[index].reason,
						icon:'none'
					})
				}else{
					var newarr = that.storeInfo.workTimeSlot[that.dayIndex].times.map((time,tindex)=>{
						time.isSelect = false;
						return time;
					})
					// that.isTime(that.addParms.appointmentDate,that.storeInfo.workTimeSlot[that.dayIndex].times[index].startTime,function(isSel){
					switch(that.storeInfo.workTimeSlot[that.dayIndex].times[index].allow){
						case true:
							that.storeInfo.workTimeSlot[that.dayIndex].times = newarr;
							that.storeInfo.workTimeSlot[that.dayIndex].times[index].isSelect = true;
							that.addParms.startTime = that.storeInfo.workTimeSlot[that.dayIndex].times[index].startTime;
							that.addParms.endTime = that.storeInfo.workTimeSlot[that.dayIndex].times[index].endTime;
						break;
						case false:
						break;
					}
				}
			},
			ShowBookingModal (){
				if(this.addParms.startTime && this.addParms.endTime){	
					this.bookingFlag = true;
				}else {
					uni.showToast({
						title:'请选择具体时间段',
						icon:'none'
					})
				}
			},
			// 立即预约
			toBooking(){
				let that = this;
				let userInfo = uni.getStorageSync('mineInfo');
				console.log('立即预约parms：',that.addParms);
				if(that.optionsData.free){
					app.httpRequest({
						url:app.globalData.baseUrl + '/api/store/v1/appointment/addByShareFreePlay',
						data:that.addParms
					}).then(res => {
						that.bookingFlag = false;
						switch (res.code){
							case 200:
								uni.navigateTo({
									url:'../orderResult/orderResult?orderId=' + res.data.id
								})
							break;
							case 50001:
								uni.showModal({
									content:res.message,
									confirmText:'成为会员',
									success(modal) {
										if(modal.confirm){
											// #ifdef MP-WEIXIN
												uni.navigateTo({
													url:'/pages/memberCenter/memberCenter'
												})
											// #endif
											// #ifdef MP-TOUTIAO
												uni.navigateTo({
													url:'/pages/register/register'
												})
											// #endif
											// uni.navigateTo({
											// 	url:'/pages/register/register'
											// })
										}
									}
								})
							break;
							default:
								uni.showToast({
									icon:'none',
									title:res.message
								})
							break;
						}
					})
				}else{
					apiToBooking(that.addParms).then(res => {
						that.bookingFlag = false;
						switch (res.code){
							case 200:
								uni.navigateTo({
									url:'../orderResult/orderResult?orderId=' + res.data.id
								})
							break;
							case 50001:
								uni.showModal({
									content:res.message,
									confirmText:'成为会员',
									success(modal) {
										if(modal.confirm){
											// #ifdef MP-WEIXIN
												uni.navigateTo({
													url:'/pages/memberCenter/memberCenter'
												})
											// #endif
											// #ifdef MP-TOUTIAO
												uni.navigateTo({
													url:'/pages/register/register'
												})
											// #endif
											// uni.navigateTo({
											// 	url:'/pages/register/register'
											// })
										}
									}
								})
							break;
							default:
								uni.showToast({
									icon:'none',
									title:res.message
								})
							break;
						}
					})
				}
			},
			// 修改预约
			UpdateTimeMed(){
				let that = this;
				app.httpRequest({
					url:app.globalData.api.store.UpdateBookingTime,
					data :{
						id:that.optionsData.orderId,
						appointmentDate: that.addParms.appointmentDate,
						startTime:that.addParms.startTime,
						endTime:that.addParms.endTime
					}
				}).then( updateresult => {
					switch(updateresult.code){
						case 200:
							uni.showToast({
								title:'修改成功',
								icon:'none',
								success(){
									uni.navigateBack({
										delta:1
									})
								}
							})
						break;
						default:
							uni.showToast({
								title:updateresult.message,
								icon:"none"
							})
						break;
					}
				})
			},
			closeMask(){
				this.ruleFlag = false;
				this.memberExplainFlag = false;
				this.bookingFlag = false;
			},
			ruleModal(){
				this.ruleFlag = true;
			},
			ShaowExplain(){
				this.memberExplainFlag = true;
			}
		},
	}
	
</script>

<style lang="scss">
// 会员特权
.member-explain {
	width: 600rpx;
	padding: 46rpx 30rpx 60rpx 30rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	position: absolute;top: 50%;
	transform: translateY(-60%);
	left: 50%;
	margin-left: -330rpx;
	.member-explain-title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		line-height: 50rpx;
		margin-bottom: 30rpx;
	}
	.booking-title {
		margin-bottom:50rpx;
	}
	.booking-item {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		line-height: 40rpx;
		margin-bottom: 30rpx;
		view:nth-child(1){
			color: #666666;
		}
		view:nth-child(2){
			max-width: 380rpx;
			font-weight: bold;
			color: #333333;
			text-align: right;
		}
	}
	.member-explain-table {
		border-bottom: 1rpx solid #979797;
		.member-explain-list {
			white-space: pre-wrap;
			display: flex;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			.left-item {
				width: 50%;
				padding: 20rpx 30rpx;
				border-top: 1rpx solid #979797;
				border-left: 1rpx solid #979797;
				border-right: 1rpx solid #979797;
			}
			.right-item {
				width: 50%;
				padding: 20rpx 30rpx;
				border-top: 1rpx solid #979797;
				border-right: 1rpx solid #979797;
			}
		}
	}
	.explain-content {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 40rpx;
	}
	.rule-btn {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;margin-top: 60rpx;
		line-height: 45rpx;text-align: center;
	}
	.booking-modal-btn {
		display: flex;
		justify-content: space-between;
		margin-top: 60rpx;
		view ,button{
			width: 276rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333333;
		}
		view:nth-child(1){
			border: 1rpx solid #979797;
		}
		view:nth-child(2),button{
			border: 1rpx solid #FFD60A;
			background-color: #FFD60A;
		}
	}
	.booking-tip {
		margin: 0 auto;
		margin-top: 18rpx;
		font-size: 24rpx;
		width: 488rpx;
		color: #666666;
		text-align: center;
		line-height: 36rpx;
	}
}
	.reservation-top{
		padding: 20rpx 0;
		border-bottom: 20rpx solid #F4F4F4;
		
		.store-item {
			width: 690rpx;
			margin: 0 auto;
			height: 168rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
		}
		.img {
			width: 168rpx;
			height: 168rpx;
			border-radius: 12rpx;
			margin-right: 20rpx;
		}
		.desc {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			padding: 0px 4px;
		}
		.flex-box {
			position: relative;
		}
		.item-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;margin-bottom: 5rpx;
			
			width: 100%;
			overflow: hidden !important;
			text-overflow: ellipsis !important;
			display: -webkit-box !important;
			-webkit-line-clamp: 1;//文字上限行
			-webkit-box-orient: vertical;
		}
		.item-tags {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			font-size: 24rpx;
			color: #999999;
			
			text:last-child .tag-dot {
				display: none;
			}
			.tag-dot {
				margin: 0 5rpx;
			}
		}
		.store-tips {
			position: absolute;bottom: 0;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #666666;
			line-height: 33rpx;
			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
	.reservation-info {
		padding: 30rpx;
		.reservation-title {
			line-height: 46rpx;
			display: flex;justify-content: space-between;
			
			.reservation-title-name {
				position: relative;
				font-size: 32rpx;
				font-weight: bolder;
				color: #333333;
				.acLine {
					position: absolute;
					bottom: 10rpx;left: 0;
					width: 100%;
					height: 10rpx;opacity: 0.8;
					background: #FA6400;
					z-index: -1;
				}
				text {
					z-index: 2;
				}
			}
			.reservation-title-rule {
				font-size: 24rpx;
				color: #666666;
			}
		}
		//  日期　
		.reservation-date{
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			
			.reservation-date-item{
				font-size: 28rpx;
				line-height: 34rpx;
				color: #BBBBBB;
				text-align: center;
				.week{
					margin-top: 10rpx;
					width: 54rpx;height: 54rpx;
					line-height: 54rpx;
				}
				.ye-day {
					color: #FA6400;
				}
				.ye-week {
					border-radius: 50%;
					background-color: #FA6400;
					color: #FFFFFF;
				}
				.nomal-day {
					color: #333333;
				}
				
				.nomal-week {
					border: 1rpx solid #BBBBBB;border-radius: 50rpx;color: #333333;
				}
			}
		}

		.reservation-time{
			display: flex;
			padding: 30rpx 0;
			flex-wrap: wrap;
			
			.reservation-time-item{
				width: 210rpx;
				height: 68rpx;
				background: #F4F4F4;
				border-radius: 6rpx;
				font-size: 28rpx;
				line-height: 68rpx;
				color: #BBBBBB;
				margin:0 10rpx 20rpx 10rpx;
				text-align: center;
			}
			
			.ye-time {
				background-color: #FA6400;
				color: #FFFFFF;
			}
			
			.nomal-time {
				color: #333333;
			}
		}
		.reservation-tips {
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			padding-bottom: 150rpx;
		}
	}
	
	.reservation-button {
		width: 92%;
		height: 120rpx;
		background: #FA6400;text-align: center;line-height: 120rpx;
		border-radius: 30px;
		font-size: 32rpx;
		font-weight: 600;
		color: #000;
		position: fixed;
		bottom:50rpx;left: 50%;margin-left: -46%;
	}
	
	.noTime {
		background: #bbb;
		color: #fff;
	}
		
	.mask {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		width: 100vw;height: 100vh;
		top: 0;left:0;
	}
		
	.reservation-rule{
		background-color: #FFFFFF;
		margin: 0 auto;padding: 50rpx;
		color: #333;
		width: 550rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		position: absolute;
		top: 50%;
		transform: translateY(-60%);
		margin-left: 50rpx;
		
		.rule-content {
			font-size: 28rpx;
			line-height: 50rpx;
		}
		.rule-title,.rule-btn {
			font-size: 32rpx;font-weight: bold;
			text-align: center;
		}
		.rule-title {
			margin-bottom: 20rpx;
		}
		.rule-btn {
			margin-top: 40rpx;
		}
	}
</style>